<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        /*=====================================================公共部分的样式====================*/

        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #CCCCCC;
        }

        .csp {
            cursor: pointer;
        }

        /*================================页面盒子的样式==================================*/
        #allBox {
            margin: 20px auto;
            width: 1405px;
        }

        #allBox::after {
            clear: both;
        }

        /*编辑列表的样式*/
        #list {
            float: left;
            width: 400px;
            min-height: 500px;
            background-color: #fff;
        }

        #list .item .itemName {
            padding-left: 10px;
            height: 32px;
            line-height: 32px;
            font-weight: bold;
            background: url(https://os.alipayobjects.com/rmsportal/mbjnAhDlEDjZOWd.png) no-repeat;
            background-position: 95% 50%;
        }

        li {
            list-style-type: none;
        }

        #list .title {
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-bottom: 1px solid #CCCCCC;
        }

        #list .title .addList {
            font-size: 20px;
            margin-left: 10px;
            font-weight: bold;
            cursor: pointer;
        }

        /*编辑框的样式*/
        #editBox {
            float: left;
            margin-left: 5px;
            width: 1000px;
            height: 500px;
            background-color: #fff;
        }

        /*当展示列表展示的时候*/
        #list .item .itemName.currentDt {
            background-image: url(https://os.alipayobjects.com/rmsportal/AvhpwIgPCgrRrrn.png);
            background-color: #fafafa;
        }

        #list .item .itemContent {
            display: none;
            transition: all .3s linear;
        }

        #list .item .itemContent.show {
            display: block;
            background-color: #fafafa;
        }

        #list .item .itemContent li {
            line-height: 32px;
            padding-left: 35px;
        }

        #list .item .itemContent li.on:hover .editAdd,#list .item .itemContent li.on:hover .editReduce{
            display: block;
        }

        #list .item .itemName:hover .editAdd,#list .item .itemName:hover .editReduce{
            display: block;
        }

        #list .item .itemContent li.on:hover {
            background-color: #ecf7ff;
            border-right: 2px solid #0ae;
        }

        /*这里添加对应的样式*/
        #list .editAdd, #list .editReduce {
            float: right;
            position: relative;
            right: 65px;
            font-weight: bold;
            display: none;
        }

        #list .editAdd {
            margin-left: 10px;
            color: green;
        }
        #list .editReduce {
            color: red;
        }

        /*========================================================按钮部分的样式=========================================*/
        #buttonBox {
            float: right;
            margin-top: 20px;
            width: 200px;
            height: 100px;
        }

        #buttonBox .okButton {
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #e3e5e4;
        }

        #buttonBox .okButton:hover {
            background-color: #e7eded;
        }

        /*============================================================公共部分的样式=====================================*/
        #mask{
            position: absolute;
            top: 0;
            width: 100%;
            height: 990px;
            background-color: #000;
            opacity: 0.4;
            z-index: 999;
        }
        .dn{
            display: none;
        }

        /*==========================================================输入框盒子===========================================*/
        #popup{
            position: absolute;
            width: 100%;
            margin: auto;
            z-index: 1002;
        }
        #popup .iptBox{
            margin: 100px auto;
            width: 500px;
            height: 200px;
            border-radius: 5px;
            background-color: #ffffff;
        }

        #popup .iptBox .iptContentTitle{
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-weight: bolder;
            border-bottom: 1px solid #ccc;
        }

        #popup .iptBox .iptContent{
            height: 100px;
            line-height: 100px;
            text-align: center;
        }

        #popup .iptBox .iptContent .ipt{
            width: 220px;
            height: 30px;
        }

        #popup .iptBox .iptContentBtn{
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        #popup .iptBox .iptContentBtn .itemBtn{
            display: inline-block;
            width: 70px;
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
            background-color: #CCCCCC;
            cursor: pointer;
        }

    </style>
</head>
<!--编辑的页面-->
<body>
<!--页面盒子-->
<div id="allBox">
    <!--编辑列表-->
    <div id="list">
        <div class="title">
            编辑展示列表
            <b class="addList js-addList">+</b>
        </div>
        <ul class="csp js-itemsList">
        </ul>
    </div>
    <!--编辑框-->
    <div id="editBox"></div>
    <div id="buttonBox">
        <div class="okButton csp js-ok">提交</div>
    </div>
</div>
<div id="popup" class="dn">
    <div class="iptBox">
        <div class="iptContentTitle">请输入需要增加的名称</div>
        <div class="iptContent">
            <input class="ipt js-ipt">
        </div>
        <div class="iptContentBtn">
            <div class="itemBtn js-iptOk">确认</div>
            <div class="itemBtn js-iptClose">取消</div>
        </div>
    </div>
</div>
<div id="mask" class="dn"></div>
</body>
<script src="./js/MooTools-Core-1.6.0.js"></script>
<script type="text/javascript" src="./UMEditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="./UMEditor/ueditor.all.js"></script>
<script type="text/javascript">
    /*
     *
     *   //获取html内容，返回: <p>hello</p>
     var html = ue.getContent();
     //获取纯文本内容，返回: hello
     var txt = ue.getContentTxt();
     *
     * */

    /*这里获得了数据能够请求返回参数*/
    window.addEvent("domready",function () {
        /*ajax的请求*/
        var data = {
            "name": "zhangy"
        };
        var request1 = new Request({
            url: '/user',
            method:'get',
            data: data,
            onSuccess: function(rsp) {
//                console.log(rsp);
            }
        }).send();

        var request2 = new Request({
            url: '/user',
            method:'post',
            data: data,
            onSuccess: function(rsp) {
//                console.log(rsp);
            }
        }).send();
    });







    /*声明模拟数据
     * 格式[obj,obj]
     * 模板样式:
     * [{
     *   name:"公告区",
     *   children:[
     *   name:"银行类",
     *   content:""
     *   ]
     * },{
     *   name:"账户管理",
     *   children:[{
     *   name:"账户注册",
     *   content:""
     *   },{
     *   name:"账户认证",
     *   content:""
     *   },{
     *   name:"账户信息修改",
     *   content:""
     *   },{
     *   name:"商户信息管理",
     *   content:""
     *   },{
     *   name:"账户安全设置",
     *   content:""
     *   }
     *   ]
     * }]
     *
     *
     *
     *
     * */

    /*=======================================================编辑器部分开始===================================*/
    var ue = UE.getEditor('editBox', {
        autoHeightEnabled: false,
        initialFrameHeight: 395
    });
    //对编辑器的操作最好在编辑器ready之后再做
    var buttonBox = $("buttonBox");
    ue.ready(function () {
        buttonBox.getElement(".js-ok").addEvent("click", function () {
            /*这里做的是最后提交的逻辑*/
        })
    });
    /*=======================================================编辑器部分结束===================================*/


    /*=======================================================数据初始化部分开始===================================*/
    /*定义数据初始化的操作,方便于展示*/
    var dataArray = [
        {
            name: "公告区",
            children: [{
                name: "银行类",
                content: ""
            }]
        },
        {
            name: "账户管理",
            children: [{
                name: "账户注册",
                content: ""
            }, {
                name: "账户认证",
                content: ""
            }, {
                name: "账户信息修改",
                content: ""
            }, {
                name: "商户信息管理",
                content: ""
            }, {
                name: "账户安全设置",
                children: [{
                    name: "测试类",
                    content: ""
                }]
            }]
        }
    ];

    /*外部放一个数组对象放所有参数的内容,allContentArrayIdx是对应的内容地址*/
    var allContentArray = [], allContentArrayIdx = 0;
    var listBox = $("list"), itemContentArray,itemNameArray,
            itemsListBox = listBox.getElement(".js-itemsList");
    /*获取名字输入框和遮罩层的节点*/
    var popup = $("popup"),mask = $("mask");
    /*=======================================================数据初始化部分结束===================================*/


    init();
    function init() {
        itemsListBox.innerHTML = createShow(dataArray);
        /*给整个节点绑定冒泡事件*/
        itemContentArray = $$(".itemContent");
        itemNameArray = $$(".itemName");
        listBox.addEvent("click", function (event) {
            var el = event.target;
            /*这里控制列表的展示*/
            if (el.hasClass("itemName")) {
                showList(el)
            }
            /*这里控制节点的删除的方法*/
            if(el.hasClass("js-reduce")){
                reduceArray(el)
            }
            /*控制节点的增加的方法*/
            if(el.hasClass("js-add")){
                /*先展示名字输入框*/
                mask.removeClass("dn");
                popup.removeClass("dn");
                /*增加的逻辑*/
                addArray(el)
            }
        });

        /*提交新增名字的逻辑*/
        popup.getElement(".js-iptOk").addEvent("click",function () {

        });
        /*取消新增名字的逻辑*/
    }








/*======================================================================关于初始化创建的展示的开始===========================================*/
    /*
     *   创建展示数据的数据拼接
     *   author: zhangyang
     *   功能描述：拿到已经准备好的数据，对其进行处理，拼接成用于展示的dom层
     *   return string;
     *
     * */
    function createShow(array) {
        /*声明一个变量，用于接受最后的数据*/
        var content = "";
        array.forEach(function (item, index) {
            /*判断子元素是否拥有子集*/
            if (item.children && !item.content) {
                content += '<li class="item js-item js-symbol" address="' + index + '" ><div class="itemName ">' + item.name + '<b class="editAdd js-add">+</b><b class="editReduce js-reduce">-</b></div><ul class="itemContent js-itemContent">'
                        + createShow(item.children) + '</ul></li>'
            } else {
                /*当没有子集的时候它已经是终端元素*/
                content += '<li class="on js-symbol"  address="' + index + '"  idx="' + allContentArrayIdx + '">' + item.name + '<b class="editAdd js-add">+</b><b class="editReduce js-reduce">-</b></li>';
                /*将内容放到数组中*/
                allContentArray[allContentArrayIdx] = {"content": item.content};
                allContentArrayIdx++
            }
        });
        return content
    }
/*======================================================================关于初始化创建的展示的结束===========================================*/

    /*创建一个用于展示的子列表的方法*/
    function showList(el) {
        var ulEl = el.getParents(".js-item").getElement(".js-itemContent");
        var type = el.hasClass("currentDt");
        /*当点击的列表处于未展示的情况下*/
        if (!type) {
            itemNameArray.removeClass("currentDt");
            itemContentArray.removeClass("show");
            ulEl.addClass("show");
            ulEl.getPrevious(".itemName").addClass("currentDt");
            /*当点击的列表处于展示的情况下*/
        } else {
            el.removeClass("currentDt");
            el.getNext(".js-itemContent").removeClass("show");
        }
    }

/*======================================================================关于删除的逻辑开始===========================================*/
    /*
    *   author: zhangyang
    *   功能描述：对数据进行删除，对展示页面中的节点进行删除
    * */
    function reduceArray(el) {
        /*删除方法是具体实行*/
        /*通过数组坐标删除对应的元素*/
        var dataObj = getDataObj(el);
        dataObj.array.splice(dataObj.index,1);
        /*页面上的删除*/
        var zy = el.getParent(".js-symbol");
        zy.getParent().removeChild(zy);
    }

/*========================================================================关于删除的逻辑结束========================================*/


/*=====================================================================关于增加的逻辑开始===========================================*/
    /*
     *   author: zhangyang
     *   功能描述：对数据进行增加和修改，对展示页面中的节点进行增加
     * */
    function addArray(el) {
        /*增加方法是具体实行*/
        /*通过数组坐标增加对应的元素或者内容*/
        var dataObj = getDataObj(el);
        /*得到操作元素*/
        var aimObj = dataObj.array[dataObj.index];
        /*判断操作的节点是新增元素或者是改变内容的层级结构*/
        /*增加子集*/
        if(aimObj.children&&!aimObj.content){

        }
        /*将展示重新绘制*/
        var zy = el.getParent(".js-symbol");
        zy.getParent().removeChild(zy);
    }
/*=====================================================================关于增加的逻辑结束===========================================*/



/*=====================================================================公共部分的方法开始===========================================*/
    /*
     *   author: zhangyang
     *   功能描述：获取操作数据的方法
     *   return: {操作数据所在的位置:array,操作数据所在的下标位置:number}
     * */
    function getDataObj(el) {
        /*定义一个数组来存放路径*/
        var address = [];
        /*将自己的节点放到路径中去*/
        el.getParents(".js-symbol").forEach(function (item) {
            address.push(item.get("address"));
        });
        /*将数组的顺序颠倒，即最外层的坐标在最前面*/
        address.reverse();
        /*返回递归方法所返回的对象*/
        return getItemObj(0,address,dataArray);



    }

    /*
     *   author: zhangyang
     *   功能描述：获取操作的节点是数据坐标
     *   return: {操作数据所在的位置:array,操作数据所在的下标位置:number}
     * */
    function getItemObj(idx,num,array) {
        if(idx != num.length-1){
            var aimArray = array[num[idx]].children;
            return getItemObj(idx+1,num,aimArray)
        }else {
           /*返回对应的对象*/
            return {"array":array,"index":num[idx]}
        }
    }
/*=====================================================================公共部分的方法结束===========================================*/




</script>
</html>